<template>
  <div class="playlist-details">
    <div class="playlist-info">
      <div class="avatar">
        <van-image :src="playlistData.coverImgUrl" height="6rem" width="6rem" radius="10px" />
      </div>
      <div class="playlist-content">
        <div class="title">
          <v-text mode="marquee" :text="playlistData.name" />
        </div>
        <div class="creator" v-if="playlistData.creator" v-touch>
          <van-image round :src="playlistData.creator.avatarUrl" class="avatar" />
          <p class="username">{{ playlistData.creator.nickname }}</p>
        </div>
        <div class="desc">
          <v-text class="desc" mode="marquee" :text="playlistData.description" />
        </div>
      </div>
    </div>
    <div class="songs">
      <SongList :songs="songsData" v-loadData="getData" />
    </div>

  </div>
</template>

<script setup>
import {defineProps, ref, onMounted, watch, computed} from "vue";

import {getPlayListDetails,getSongDetail} from "../api/api";
import SongList from "../components/list/SongList.vue";
import Loading from "../common/Loading";
import {Notify} from "vant";

let propsDef = defineProps({
  playListId:String
});

let songsData = ref([]);

let playlistData = ref({});
let songsIds = ref([]);
let playListId = computed(()=>propsDef.playListId);

let limit = 30;

function getData(){
  if(songsIds.value.length > 0){
    let ids = songsIds.value;
    let splitData = ids.splice(0,limit);
    Loading.show();
    return getSongDetail(splitData.join(",")).then((res)=>{
      let songs = res.songs;
      if(songs){
        songsData.value.push(...songs);
      }
      Loading.hide();
    }).catch(()=>{
      Loading.hide();
    })
  }
}

onMounted(()=>{
  function init(){
    Loading.show();
    return getPlayListDetails(propsDef.playListId).then((res)=>{
      let playlist = res.playlist;
      playlistData.value = playlist;
      songsIds.value = playlist.trackIds.map(item => item.id);
      Loading.hide();
    }).catch(()=>{
      Loading.hide();
      Notify({
        type:"danger",
        message:"加载失败..."
      });
    });
  }
  watch(playListId,()=>{
    if(songsIds.value.length > 0){
      getData();
    }else{
      init().then(()=>{
        getData();
      })
    }
  },{
    immediate: true
  });
})
</script>

<style lang="scss" scoped>
.playlist-details{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .playlist-info{
    display: flex;
    width: 100%;
    height: 10rem;
    padding: .5rem;
    box-sizing: border-box;
    background-image: linear-gradient(45deg, #ff7f34, #fa3fe3);
    align-items: center;
    .playlist-content{
      max-width: 70%;
      padding: .5rem;
      box-sizing: border-box;
      color: #fff;
      .title{
        font-size: 18px;
        font-weight: bold;
      }
      .creator{
        display: inline-flex;
        margin: .5rem 0 ;
        align-items: center;
        padding: .2rem;
        .avatar{
          width: 1.5rem;
          height: 1.5rem;
        }
        .username{
          margin-left: .5rem;
          font-size: 12px;
        }

      }
      .desc{
        font-size: 12px;
      }
    }
  }
  .songs{
    flex-grow: 0;
    height: calc(100% - 10rem);
  }
}
</style>